<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" destroyOnClose :title="title" :width="'70%'" @ok="handleSubmit">
    <a-form>
      <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
        <div style="margin-bottom: 10px; color: #888888">按属性快速生成SKU</div>
        <div style="margin-bottom: 10px">
          <JSelectMultiple placeholder="请选择属性" :dictCode="dictCode" v-model:value="propSelect" />
        </div>
        <div style="text-align: right">
          <a-button type="primary" @click="onRegenerate()">生成SKU</a-button>
        </div>
      </a-form-item>
    </a-form>
    <JVxeTable ref="skuTableRef" stripe toolbar rowNumber rowSelection resizable keepSource :columns="columns" :data-source="dataSource" />
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
  import { editTableColumns, formSchema } from '../UfMallSku.data';
  import { batchSaveOrUpdate, generate, list, saveOrUpdate } from '../UfMallSku.api';
  import { JVxeTable } from '/src/components/jeecg/JVxeTable';
  import JSelectMultiple from '@/components/Form/src/jeecg/components/JSelectMultiple.vue';
  import { useUserStore } from '@/store/modules/user';
  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  const isDetail = ref(false);
  const columns = ref(editTableColumns);
  const dataSource = ref([]);
  const propSelect = ref('');
  const spuInfo = ref({});
  const skuTableRef = ref();
  const userStore = useUserStore();
  const orgCode = unref(userStore.getUserInfo).orgCode;
  const dictCode = `uf_mall_prod_prop,prop_name,id,sys_org_code='${orgCode}'`;
  // 快速生成SKU
  function onRegenerate() {
    generate({ properties: propSelect.value, prodId: spuInfo.value.id }).then((data) => {
      skuTableRef.value?.addRows(data);
    });
  }

  //表单赋值
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    //重置表单
    isUpdate.value = !!data?.isUpdate;
    isDetail.value = !!data?.showFooter;
    if (unref(isUpdate)) {
      console.log(data.record);
      console.log('getUserInfo');
      //表单赋值
      spuInfo.value = data.record;
      setDrawerProps({ showFooter: true, confirmLoading: false, showCancelBtn: true, showOkBtn: true });

      list({ prodId: data.record.id }).then((data) => {
        dataSource.value = data;
      });
    }
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
  //表单提交事件
  async function handleSubmit(v) {
    try {
      setDrawerProps({ confirmLoading: true });
      //关闭弹窗
      closeDrawer();
      await skuTableRef.value!.validateTable();
      await batchSaveOrUpdate({ id: spuInfo.value.id, skus: skuTableRef.value!.getTableData() });
      //刷新列表
      emit('success');
    } catch ({ errorFields }) {
      return Promise.reject(errorFields);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
